import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import './index.scss';

import { imgHost } from '../../../util/costant';

class HomeListItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }
  // 过滤接受的参数
  filter(data) {
    return {
      // 标题
      title: data.title.rendered,
      // 缩略图地址
      litpic: imgHost + data.litpic[0][0].split(',')[0],
      // 摘要
      excerpt: data.excerpt.rendered.replace(/(<a.*?\/a>)/g, ''),
      // 发布时间
      date: data.date.substr(0, 10),
      // 作者Id
      author: data.author,
      id: data.id,
    }
  }
  render() {
    const data = this.filter(this.props.data);
    return (
      <div id="home-list-item">
        <h3 className="arc-title"><Link to={`/article-detail/${data.id}`}>{data.title}</Link></h3>
        <div className="arc-content">
          <div className="arc-pic">
            <Link to={`/article-detail/${data.id}`}>
              <img src={data.litpic} alt={data.title} />
            </Link>
          </div>
          <div className="arc-info">
            <div className="text" dangerouslySetInnerHTML={{ __html: data.excerpt }} />
            <Link to={`/article-detail/${data.id}`} className="readmore">
              阅读全文{'>>'}
            </Link>
          </div>
          <div className="author-info">
            <span className="time">{data.date}</span>
            <span className="author">作者ID:{data.author}</span>
          </div>
        </div>
      </div>
    )
  }
}
export default HomeListItem;
HomeListItem.propTypes = {
  data: PropTypes.objectOf(Object),
}
